<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			
			<div id="content">
				<component :is="com"></component>
			</div>
			
			<button @click="chooseContent(1)">首页</button>
			<button @click="chooseContent(2)">列表</button>
			<button @click="chooseContent(3)">新闻</button>
			<button @click="chooseContent(4)">个人</button>
		</div>
		<script type="text/x-template" id="laochen">
			<div>
				<h1>首页内容</h1>
				<p>Hello hello hello vue</p>
			</div>
			
		</script>
		<script type="text/javascript">
			let com1 = Vue.component("index-com",{
				name:'index',
				template:'#laochen'
			})
			let com2 =Vue.component("list-com",{
				template:'<div><h1>列表内容</h1><p></p></div>'
			})
			let com3 =Vue.component("news-com",{
				template:'<h1>新闻内容</h1>'
			})
			let com4 =Vue.component("me-com",{
				template:'<h1>个人中心内容</h1>'
			})
			
			let app = new Vue({
				el:"#app",
				data:{
					com:com1
				},
				methods:{
					chooseContent:function(id){
						console.log(id)
						console.log(this)
						//通过获取id,选择注册好的组件
						this.com = this.$options.components['com'+id]
					}
				},
				components:{
					com1,com2,com3,com4
				}
			})
		</script>
	</body>
</html>
